import { Annotation } from "../index";
import {Config} from '../config'
import {findlineByNode,findSpanInContainer,setLabeledString} from '../infrastructure/Entity/text'
import {ELEMENT_TAG_ENUMS} from '../enums/index'
export class TextSelectionHandler {
    constructor(public root:Annotation,private config:Config){}

    getSelectionInfo(){
        const selection = window.getSelection()
        let startElement = null;
        let endElement = null;
        // get start element and endelement
        try {
            startElement = selection!.anchorNode!.parentNode
            endElement = selection!.focusNode!.parentNode
        }catch(e){
            return null
        }
        return {
            startNode: selection!.anchorNode,
            endNode: selection!.focusNode,
            startIndex: selection!.anchorOffset,
            endIndex: selection!.focusOffset
        }
    }

    renderInlineText(lineIndex:number,startIndex:number,endIndex:number){
        let complierArr = findSpanInContainer(this.root.element)
        const spanText = complierArr[lineIndex].innerHTML
        complierArr[lineIndex].innerHTML = setLabeledString(spanText,startIndex,endIndex)
        this.root.updateParagraphArr()
    }
    renderOfflineText(startLineIndex:number,endLineIndex:number,startIndex:number,endIndex:number){
        let complierArr = findSpanInContainer(this.root.element)
        for(let i=0;i<complierArr.length;i++){
            const spanText = complierArr[i].innerHTML
            const currentNode = complierArr[i]
            // label start
            if(i==startLineIndex){
                const labelString = spanText.substring(startIndex)
                const fontString = spanText.substring(0,startIndex)
                currentNode.innerHTML = fontString + '<span style="background-color:red;color:white">' + labelString + '</span>'             
            }
            if(i==endLineIndex){
                const labelString = spanText.substring(0,endIndex)
                const afterString = spanText.substring(endIndex)
                currentNode.innerHTML = '<span style="background-color:red;color:white">' + labelString + '</span>' + afterString
            }
            if((i<endLineIndex)&&(i>startLineIndex)){
                currentNode.style.backgroundColor = "red"
                currentNode.style.color = "white"
            }
        }
        this.root.updateParagraphArr()
    }
    textSelection(){
        let selectionInfo = this.getSelectionInfo()
        // empty click: if there is an click on white block there should not be an render inside the container
        if((selectionInfo!.endNode == selectionInfo!.startNode)&&(selectionInfo!.startIndex==selectionInfo!.endIndex)){
            console.log("empty click")
            return ;
        }
        // inline
        if(selectionInfo!.endNode === selectionInfo!.startNode){
            const lineIndex = findlineByNode(this.root.paragraphArr,selectionInfo!.startNode)
            // render text
            this.renderInlineText(lineIndex,selectionInfo!.startIndex,selectionInfo!.endIndex)
            // this way to callback startIndex and endIndex
            this.root.emit('textSelected',selectionInfo!.startIndex,selectionInfo!.endIndex)
        // offline
        }else{
            // if there is an offline i will find into these node,to find where is the node line in total content
            // start point line
            const startParagraphIndex = findlineByNode(this.root.paragraphArr,selectionInfo!.startNode)
            // end point line
            const endParagraphIndex =  findlineByNode(this.root.paragraphArr,selectionInfo!.endNode)
            // render offline text
            this.renderOfflineText(startParagraphIndex,endParagraphIndex,selectionInfo!.startIndex,selectionInfo!.endIndex)
            // produce to committer
            this.root.emit('textSelected',selectionInfo!.startIndex,selectionInfo!.endIndex)
        }
    }
}
